<html>
{% load dajaxice_templatetags %}

<head>
<style type="text/css">
body{
	background-color:black;
	color:white;
}
#cues{
	background-color:#111111;
	width:90%;
}
li{
	background-color:#333333;
	list-style-type: none;
	padding:0.5em;
	margin:0.25em;
}
.editButtons{
	float:right;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--script src="{{ STATIC_URL }}jquery.dajax.core.js" type="text/javascript" charset="utf-8"></script-->
<script src="{{ STATIC_URL }}csfr.js"></script>
{% dajaxice_js_import %}
</head>

<div id="cues">
{% load mptt_tags %}
<ul>
	{% recursetree nodes %}

	<li id='{{node.id}}' class="cue {% if not node.is_leaf_node %}
		parent
		{% endif %}">
		{% if not node.is_leaf_node %}
		<img id='{{node.id}}' class='stack' src='{{ STATIC_URL }}arrow.png' />
		{% endif %}
	{{ node.cueName }}
	</li>
		{% if not node.is_leaf_node %}
			<ul id="stack{{node.id}}">
				{{ children }}
			</ul>
		{% endif %}
	
	{% endrecursetree %}
</ul>
</div>

<script type="text/javascript">
var edit = false;
var hidden = new Array();
hidden[0]=false;
hidden[1]=true;
$(document).ready(function() {
	$('#stack1').children().hide();
});

$("li").hover(function() {
	$(this).css('background-color', '#555555');
},function() {
	$(this).css('background-color', '#333333');
	$('.editButtons').remove();
	edit=false;
}
);

$("li").click(function() {
	$list = $(this).attr("class");
	if($list.indexOf("parent") >= 0){
		var currentId = $(this).attr('id');
		if(hidden[currentId]==true){
			$('#stack' + currentId).children().show();
			hidden[currentId]=false;
		}else{
			$('#stack' + currentId).children().hide();
			hidden[currentId]=true;
		}
	}else{
		$(this).css('background-color', '#1e90ff');
		if(edit==false){
			$(this).append("<span class='editButtons'> <form>{% csrf_token %}\
			<button onclick='Dajaxice.cue.getCueTransitions(showTransitions, 1);return false;'>go to cue</button><button>set as next cue</button> \
			<button>insert new cue</button></form></span>");
			edit=true;
		}
		liID =$(this).attr('id');
		Dajaxice.cue.getCueTransitions(showTransitions, {'data':liID});
	}
}
);
var id;
function displayEditCue(id) {
$("li#"+id).html("convert to edit form mode... will probably need to learn ajax");
}

function my_js_callback(data){
    alert(data.message);
}

function showTransitions(data){
	trans = jQuery.parseJSON(data.transitions);
	transitionsHTML = "<div>Fixture: / XTime (seconds): / Cue Settings:<br/>"
	for(var i=0; i < trans.length; i++){
	  transitionsHTML = transitionsHTML + trans[i].name + " / " + trans[i].seconds +
	  " / " + trans[i].desiredSettings[0].name + ": "+ trans[i].desiredSettings[0].value+"<br/>";
	}
	transitionsHTML = transitionsHTML + "<span class='editButtons'> <form>{% csrf_token %}\
			<button>edit</button></form></span><br/>";
	transitionsHTML = transitionsHTML + "</div>";
	$("li#"+data.cueID).append(transitionsHTML);
}


$(document).ajaxSend(function(event, xhr, settings) {
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        var host = document.location.host; // host + port
        var protocol = document.location.protocol;
        var sr_origin = '//' + host;
        var origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url == origin || url.slice(0, origin.length + 1) == origin + '/') ||
            (url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});

</script>